<template>
  <div>
    <div class="content" style="display: flex;">

      <div class="left" style="flex: 1; display: flex; flex-direction: column;">
        <!-- icon卡片 -->
        <div class="icon_main" style="flex: 2;">
          <el-card>
            <div slot="header">
              <span>课程评价系统</span>
              <el-button style="margin-left: 220px; color:black" type="text">
                <i @click="toUpdate" class="el-icon-s-custom"></i>
              </el-button>
            </div>
            <div style="display: flex; flex-direction: column; align-items: center;">
              <div> 
                <svg t="1727340944871" class="icon" viewBox="0 0 1820 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="11061" id="mx_n_1727340944872" width="70" height="70">
                  <path
                    d="M1022.19345334 1323.55213536H300.00304844c-66.02766254 0-119.50800966-53.4803493-119.50801185-118.68523562V-242.80500844c0-65.20488634 53.4803493-118.68523564 119.50801185-118.68523565h1302.2464957c66.02766254 0 119.50800966 53.4803493 119.50801186 118.68523565v954.62422978c0 23.44907633-18.30673588 41.75581001-41.75581219 41.75581006s-41.75581001-18.30673588-41.75581005-41.75581006V-242.80500844c0-19.12950991-15.83841158-35.17361338-35.99638962-35.17361341H300.00304844c-20.15797802 0-35.9963896 15.83841158-35.99638962 35.17361341V1204.86689974c0 19.12950991 15.83841158 35.17361338 35.99638962 35.17361339h722.1904049c23.44907633 0 41.75581001 18.30673588 41.75581005 41.75581221s-19.12950991 41.75581001-41.75581005 41.75581002z m0 0"
                    fill="#5262fb" p-id="11062"></path>
                  <path
                    d="M1260.38669866 41.46361763H640.2203437c-23.44907633 0-41.75581001-18.30673588-41.75581003-41.75581217s18.30673588-41.75581001 41.75581003-41.75581008H1260.38669866c23.44907633 0 41.75581001 18.30673588 41.75581217 41.75581008 0 23.24338226-18.30673588 41.75581001-41.75581217 41.75581217zM911.94165648 1003.4928159H640.2203437c-23.44907633 0-41.75581001-18.30673588-41.75581003-41.75581002s18.30673588-41.75581001 41.75581003-41.75581h271.72131278c23.44907633 0 41.75581001 18.30673588 41.75581002 41.75581s-18.51242775 41.75581001-41.75581002 41.75581002zM1260.38669866 1311.00482425c-11.7245371 0-23.44907633-3.2910983-32.49959727-10.90176521-18.30673588-12.54731328-26.74017461-34.35083937-23.44907414-55.94867138l25.09462437-157.14994951-108.6062466-111.89734494c-15.01563539-15.01563539-20.15797802-37.64193767-13.37008732-57.59422164 6.78789068-20.15797802 24.27185037-35.17361338 46.07537643-38.46471386l147.07096052-22.62630013 65.20488636-139.6659877c9.25621497-20.15797802 29.20849891-32.49959726 51.83479903-32.49959719s42.57858624 12.54731328 51.83480117 32.49959719l65.2048864 139.6659877 147.07096049 22.62630013c20.98075202 3.2910983 38.46471171 17.48395967 45.86968237 38.46471386 6.78789068 20.15797802 1.64555023 42.57858624-13.3700873 57.59422164l-108.60624664 111.89734494 25.09462656 157.14994951c3.2910983 21.80352609-5.75942259 43.40136029-23.44907633 55.94867138-18.30673588 12.54731328-41.75581001 14.19286135-61.09101399 3.29109831l-129.58700082-71.78708297-129.58699868 71.78708297c-8.43343875 5.14234044-17.48395967 7.61066468-26.74017461 7.6106669z m157.14994949-167.02324446c9.25621497 0 19.12950991 2.46832428 27.56294867 7.61066471l95.23615932 52.65757527-19.12950994-116.21691355c-2.46832428-17.48395967 2.46832428-35.9963896 15.01563758-49.36647474l81.86607197-84.33439624-110.25179688-16.66118567c-19.12950991-2.46832428-35.17361338-15.01563539-43.40136022-32.49959723l-47.7209267-102.02404994-47.72092671 102.02404994c-8.43343875 17.48395967-24.27185037 29.20849891-43.40136025 32.49959723l-110.25179469 16.66118567 81.86607199 84.33439624c12.54731328 12.54731328 18.30673588 30.85404701 15.0156354 49.36647474l-19.12950777 116.21691355 95.23615931-52.65757527c10.07898899-5.14234044 19.12950991-7.61066468 29.20849892-7.61066471z m0 0M637.75202159 562.69132465c-29.20849891 22.00922014-53.06896116 41.55011815-71.37569705 58.82838379l-29.61988483-35.58500153c7.19927879-6.58219663 10.90176305-17.68965371 10.90176299-32.91098312v-126.09020633h-38.46471387v-54.30312546h94.00199934v160.85243595c11.10745708-8.43343875 21.39214014-16.24979753 30.4426589-23.86046445 1.23416213 21.18644607 2.67401834 38.87609981 4.11387452 53.06896115zM570.90158499 233.99287242c19.12950991 26.74017461 36.40777554 52.45188118 51.42341308 76.92942559l-51.42341308 31.26543508c-11.93023114-23.86046443-28.18003082-50.6006369-48.5437007-79.80913582l48.5437007-28.38572485z m71.78708299 13.78147542h258.14553142v188.00399651h-102.84682621v28.3857227h120.33078588V507.56542733h-87.21410646c23.86046443 26.74017461 55.74297952 46.69245857 95.64754738 60.06254591-9.25621497 14.80994351-19.33520398 32.49959726-30.44266105 53.06896116-40.315956-21.18644607-73.02124514-49.77786284-98.1158717-85.56855841v108.60624666h-53.48034926V532.24866578c-23.44907633 35.58500149-54.09742927 67.46751657-91.945061 95.6475474-10.07898899-13.37008733-22.21491419-27.56294866-36.40777554-42.57858624 48.13231477-30.03127296 81.66037794-55.94867355 100.17280786-77.75219961h-91.53367502v-43.40136028h119.50801183v-28.3857227h-102.02405219v-188.00399651z m52.65757525 73.43263322h49.36647475v-30.85404917h-49.36647475v30.85404917z m0 71.99277704h49.36647475v-30.854047h-49.36647475v30.854047z m153.03607496-102.84682621h-50.18925095v30.85404917h50.18925095v-30.85404917z m0 102.84682621v-30.854047h-50.18925095v30.854047h50.18925095zM980.43764116 355.14643232h55.53728542v-45.86968454c-16.66118561 1.64555023-33.11667722 3.08540427-49.77786284 4.11387449-1.85124213-21.18644607-4.52526046-39.0817939-7.61066472-53.48034926 44.01844025-2.26263025 93.59061124-8.02205282 148.71650859-17.48395968l12.9586992 52.24618717c-17.07257373 3.08540427-33.93945126 5.75942259-51.012025 8.22774468V355.35212637h47.7209267v49.77786286h-47.7209267v45.86968455l11.72453926-11.72453926c13.98716729 11.7245371 32.08820913 28.18003082 54.30312334 49.36647693l-37.23055177 35.9963896c-9.87329494-12.34161924-19.54089586-23.65477038-28.79711083-34.35084151v155.91578735h-53.48034927V484.93912505c-10.28468304 31.26543508-23.03768821 61.29670804-38.05332359 89.68243291-5.34803451-23.86046443-11.93023114-47.30953853-19.95228396-70.1415349 18.30673588-25.5060125 35.17361338-58.62268972 50.18924876-99.35003383h-47.72092662v-49.98355691z m141.3115379 229.3484206h110.25179687v-35.99638962h-81.86607417v-46.69245857h81.86607417v-34.76222748h-89.47673888v-48.54370072h240.66157172v48.54370072H1289.18380944v34.76222748h82.68884821v46.69245857H1289.18380944v35.99638962h104.08098835V633.03855367h-271.51561873v-48.54370075z m30.03127296-335.07495701H1369.40433335v140.28306983h-217.62388133v-140.28306983z m162.08659591 48.54370287h-106.54931046v43.4013603h106.54931046v-43.4013603z"
                    fill="#5262fb" p-id="11063"></path>
                </svg>
              </div>
              <div style="font-family: '行楷';">{{ realname }}</div>
            </div>
          </el-card>
        </div>

        <!-- 模态框 -->
        <el-dialog title="修改密码" :visible.sync="visible">
          <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item label="用户名" label-width="80px">
              <el-input v-model="realname" disabled></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword" label-width="80px">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword" label-width="80px">
              <el-input type="password" v-model="form.confirmPassword"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-button @click="confirmUpdate(userId)" type="primary">确认修改</el-button>
          </div>
        </el-dialog>

        <!-- 注册人数统计 -->
        <div class="registerNumber" style="flex: 3;">
          <el-card style="height: 400px;">
            <span>在线注册人数</span>
            <div id="container" style="margin-top: 40px; height: 200px;"></div>
          </el-card>
        </div>
      </div>

      <div class="right" style="flex: 2; margin-left: 10px;display: flex;flex-direction: column;">
        <!-- 走马灯 -->
        <div class="swipe" style="flex: 1;">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in imageUrls" :key="item.id">
              <img :src="item.url" alt="轮播图" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 最新公告 -->
        <div class="notice" style="flex: 1;">
          <el-card style="height: 300px;">
            <!-- 公告顶部横向导航 -->
            <div class="title" style="display: flex;">
              <div @click="toToggle(item)" :class="{ active: item.id === activeItemId }" v-for="item in category"
                :key="item.id" style="margin-right: 20px; cursor: pointer;">
                {{ item.name }}
                <el-divider  direction="vertical"></el-divider>
              </div>
              <div class="toDetail" style="cursor: pointer;color: #5f9ea0;">
                <i class="el-icon-arrow-right" @click='toNotice()'></i>
              </div>
            </div>
            <el-divider content-position="right"></el-divider>
            <!-- 公告内容 -->
            <div class="content" v-for='item in categoryArticle' ::key="item.id">
              <div style="display: flex; justify-content: space-between ;">
                <div class="con_left">{{ item.title }}</div>
                <div class="con_right">{{ item.publish_time | fmtDate }}</div>
              </div>
              <el-divider content-position="right"></el-divider>
            </div>
          </el-card>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { get, post } from '@/utils/request'
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {
      // 左上模态框数据
      visible: false,
      form: {},
      // 验证规则
      rules: {
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
          // 可以添加更多的规则，比如包含数字、大写字母等
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ]
      },
      // 获取图表数据
      PieData: [],
      // 默认点击公告导航栏的id 用于添加样式
      activeItemId: 1,
      // 轮播图数组
      imageUrls: [],
      // 接收导航栏
      category: [],
      // 对应导航栏的数组
      categoryArticle: [],
      // 公告栏点击详情后的请求页面发送请求传递的参数
      params: {
        page: 1,
        pageSize: 3,
        id: this.activeItemId //这是栏目id，或许对应栏目需要传的所传的参数
      },
    }
  },
  computed: {
    ...mapGetters([
      'realname',
      'userId'
    ])
  },
  methods: {
    toNotice(){
      this.$router.push({
        path:'/noticeView/NoticeView',
      })
    },
    // 获取公告导航栏栏目
    async getCategory() {
      let res = await get('/category/findAll')
      // console.log(res);
      this.category = res.data

    },
    // async getCategoryArticles() {
    //   let res = await get('/category/findCategoryArticles')
    //   console.log(res);
    //   this.categoryArticle = res.data
    //   console.log(res.data);
    // }
    // ,
    async toToggle(item) {
      this.activeItemId = item.id;
      this.params.id = item.id
      console.log(this.params);
      let res = await get('/category/pageQuery', this.params)
      console.log(res.data);
      this.categoryArticle = res.data.articles
      console.log(this.categoryArticle);

      // this.categoryArticle = res.data;
    },
    // 获取注册人数数据
    async getPie() {
      let res = await get('/user/getRolesCount',{
      })
      this.PieData = res.data.count
    },
    // 加载pie图表
    loadPie() {
      const data = this.PieData;
      const piePlot = new Pie('container', {
        data,
        angleField: 'user_count',
        colorField: 'role_name',
      });
      piePlot.render();
    },
    // 修改密码
    toUpdate() {
      this.visible = true
      this.form = {}
    },
    // 确认修改
    confirmUpdate(id) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.form.id = id
          let res = await post('/user/saveOrUpdate', this.form)
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message.error(res.message)
          }
          this.visible = false
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 
    async getSwipe() {
      let res = await get('/carousel/findAll')
      console.log(res.data);
      this.imageUrls = res.data
    }
  },
  async created() {
    this.getSwipe();
    await this.getCategory();
    if (this.category.length > 0) {
      this.toToggle(this.category[0]);
    }
  },
  async mounted() {
    await this.getPie();
    this.loadPie();
  },
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.active {
  color: #3e36e0;
}
</style>
